<template>
	<div class="latest-recommend">
		<div class="nav-head"><router-link to="/sonLis"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">最新推荐</div></div>
		<div class="top-blank"></div>
		<div class="latest-recommend-wraper">
			<div class="latest-recommend-cont">
				<img src="../../../../assets/1240.png">
				<p>轻音乐300首</p>
			</div>
			<div class="latest-recommend-cont mlr15">
				<img src="../../../../assets/2240.png">
				<p>欧美风情萨克斯</p>
			</div>
			<div class="latest-recommend-cont">
				<img src="../../../../assets/3240.png">
				<p>少女的巧声细语</p>
			</div>
			<div class="latest-recommend-cont">
				<img src="../../../../assets/4240.png">
				<p>友情与爱情</p>
			</div>
			<div class="latest-recommend-cont mlr15">
				<img src="../../../../assets/5240.png">
				<p>聆听最初的声音</p>
			</div>
			<div class="latest-recommend-cont">
				<img src="../../../../assets/4240.png">
				<p>给最喜欢音乐的你</p>
			</div>
			<div class="latest-recommend-cont">
				<img src="../../../../assets/3240.png">
				<p>张根硕送你一首歌</p>
			</div>
			<div class="latest-recommend-cont mlr15">
				<img src="../../../../assets/2240.png">
				<p>随风摆动，绽放自我</p>
			</div>
			<div class="latest-recommend-cont">
				<img src="../../../../assets/1240.png">
				<p>致最爱的你</p>
			</div>
			<div class="latest-recommend-cont">
				<img src="../../../../assets/2240.png">
				<p>张根硕送你一首歌</p>
			</div>
			<div class="latest-recommend-cont mlr15">
				<img src="../../../../assets/5240.png">
				<p>随风摆动，绽放自我</p>
			</div>
			<div class="latest-recommend-cont">
				<img src="../../../../assets/3240.png">
				<p>致最爱的你</p>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"latestRecommend",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}	
.latest-recommend-wraper{
	width: 100%;
	margin-top: 33 / 100rem;
	overflow: hidden;
	.latest-recommend-cont{
		float: left;
		width: 240 / 100rem;
		margin-bottom: 25 / 100rem;
		img{
			width: 100%;
		}
		p{
			font-size: 24 / 100rem;
			margin-left: 10 / 100rem;
			padding-top: 12 / 100rem;
		}
	}
}
.mlr15{
	margin-left: 15 / 100rem;
	margin-right: 15 / 100rem;
}		
</style>